<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>姓名案例插值</title>
    <!-- 引入 Vue 2 的 CDN 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        姓<input type="text" v-model="firstName"><br/>
        名<input type="text" v-model="lastName"><br/>
        姓名<span>{{firstName.slice(0,3)}}-{{lastName}}</span>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                firstName: '张',
                lastName: '三'
            },
            
        });
    </script>

</body>
</html>